<!doctype html>
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
  <title>core-splitter</title>
  
  <script src="../platform/platform.js"></script>
  
  <link rel="import" href="core-splitter.html">
  
  <style>
  
    body {
      -webkit-user-select: none;
      -moz-user-select: none;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      margin: 24px;
    }
    
    .container {
      width: 400px;
      height: 200px;
      border: 4px solid #aaa;
    }
    
    #box1, #box3, #box5, #box6 {
      width: 100px;
    }
    
    #box2, #box4 {
      height: 40px;
    }
    
  </style>
  
</head>
<body unresolved>
  <div class="container" horizontal layout>
    <div>left</div>
    <core-splitter direction="left"  minSize="128"></core-splitter>
    <div flex>right</div>
  </div>
  
  <br>
  
  <div class="container" vertical layout>
    <div id="box2">top</div>
    <core-splitter direction="up"></core-splitter>
    <div flex>bottom</div>
  </div>
  
  <br>
  
  <div class="container" horizontal layout>
    <div id="box3">1</div>
    <core-splitter direction="left"></core-splitter>
    <div flex vertical layout>
      <div id="box4">2</div>
      <core-splitter direction="up"></core-splitter>
      <div flex>3</div>
    </div>
  </div>
  
  <br>
  
  <div class="container" horizontal layout>
    <div id="box5">left</div>
    <core-splitter direction="left"></core-splitter>
    <div flex>center</div>
    <core-splitter direction="right"></core-splitter>
    <div id="box6">right</div>
  </div>
  
</body>
</html>
